<script lang="ts" setup>
import { getOrders } from '@/api/order'
import type { OrderState } from '@/typings/api'
import type { IOrder } from '@/typings/interface'
import type { LoadMore } from '@/typings/components'
import XLoadMore from '@/components/XLoadMore.vue'
import Item from './components/OrderItem.vue'
// 订单状态初始信息
const pageInfo = reactive({
  page: 0,
  size: 10,
  state: null as OrderState | null,
  isEnd: false,
  status: 'more' as LoadMore
})

let loading = $ref<boolean>(true) // 加载状态
let orders = $ref<IOrder[]>([]) //订单列表
// 订单列表请求
async function setOrders(concat?: boolean) {
  // 如果接口无更多数据终止
  if (pageInfo.isEnd) return
  // 请求前显示加载框
  pageInfo.status = 'loading'
  // 页数加1
  pageInfo.page++
  // 接口请求
  const { data } = await getOrders(pageInfo)
  // 请求不同状态的订单列表或当前更多订单
  concat ? (orders.concat(data.current_data)) : orders = data.current_data
  // 该次接口返回页列表长度小于默认展示长度，则停止加载更多
  pageInfo.status = 'more'
  if (data.current_data.length < pageInfo.size) {
    pageInfo.isEnd = true
    pageInfo.status = 'nomore'
  }
  // 请求成功关闭加载动画
  loading = false
}

// 切换不同订单状态列表
async function changeOrderState(OrderState: OrderState | null) {
  loading = true
  pageInfo.state = OrderState
  pageInfo.page = 0
  pageInfo.isEnd = false
  await setOrders()
}

// 订单tab的下划线动态位置切换
const lineLeft = $computed(() => {
  switch (pageInfo.state) {
    case 'CANCEL':
      return '84.5%'
    case 'NEW':
      return '32.5%'
    case 'PAY':
      return '58.5%'
    default:
      return '8.5%'
  }
})

// 首次请求数据
onLoad(() => {
  // 接口请求前的加载动画
  loading = true
  uni.showLoading({ title: '加载中' })
  setOrders()
})

// 监听loading状态显示或关闭提示加载框
watch(
  () => loading,
  (newVal) => {
    if (newVal)
      uni.showLoading({ title: '加载中' })
    else
      uni.hideLoading()
  }
)

// 页面滚动到底部的事件，如果还有更多数据则继续请求接口
onReachBottom(() => {
  if (pageInfo.isEnd) return
  pageInfo.status = 'more'
  setOrders(true)
})

</script>

<template>
  <view>
    <view around bg-white py-4 text="34 #2e2e2e" relative>
      <view class="line" />
      <text :class="[!pageInfo.state && 'active']" @click="changeOrderState(null)">
        全部
      </text>
      <text :class="[pageInfo.state === 'NEW' && 'active']" @click="changeOrderState('NEW')">
        未支付
      </text>
      <text :class="[pageInfo.state === 'PAY' && 'active']" @click="changeOrderState('PAY')">
        已支付
      </text>
      <text :class="[pageInfo.state === 'CANCEL' && 'active']" @click="changeOrderState('CANCEL')">
        已取消
      </text>
    </view>
    <view gap-y-3 flex="~ col" pt-3 box-border bg="#f8f8f8">
      <Item v-for="item in orders" :order="item" />
    </view>
    <view v-if="orders.length === 0 && !loading" center>
      <text>暂无更多订单</text>
    </view>
    <view v-else-if="!loading" bg="#f8f8f8">
      <XLoadMore :status="pageInfo.status" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
  background-color: #f8f8f8;
}

.active {
  color: #f38e48;
  font-size: 38rpx;
}

.line {
  height: 4px;
  position: absolute;
  background-color: #f38e48;
  left: v-bind(lineLeft);
  border-radius: 9999rpx;
  bottom: 20rpx;
  width: 38rpx;
  transition: left 0.3s;
}
</style>